<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行内块元素的幽灵空白问题</title>
    <style>
      /* 问题 图片下面有点小空白 由字体引起的 */
      div {
        background-color: #ffccff;
        width: 600px;
        /* 第三种方法 */
        font-size: 0;
      }
      /* 解决方案 */
      img {
        /* 第一种方法(后面有字体时)（想让字体在哪就填哪个属性） */
        /*vertical-align: middle;*/
        /* 第二种方法 没字体时 */
        /*display: block;*/
      }
    </style>
</head>
<body>
  <div>
    <img src="../images/悟空.jpg" alt="">
  </div>
</body>
</html>